/**
 * Created with Vim7.3 Mac
 * @fileOverview :
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-06-02 14:15:47
 * @filename : src/app.js
 * @version :
 * @description :
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity,
} from 'react-native';

import Index from './components/index';
import LetsMeet from './components/letsMeet';
import Menu from './common/menu';
import Gesture from './common/gesture';
import Icon from 'react-native-vector-icons/Ionicons';
import IconFA from 'react-native-vector-icons/FontAwesome';

class App extends Component {

    constructor(props) {
        super(props);
        this._hideNavBar = true;
        //Share.getAllClearStorage();Store = {};
        _RightButton = {
            'filter': <IconFA name="filter" style={{ color: '#fff' }} size={30}/>,
            'heart': <IconFA name="heart" style={{ color: '#FF1493' }} size={30}/>,
            'done': <Text style={{color: '#fff'}}>Done</Text>,
        };
        console.log('app',Store);
    }

    componentWillMount(){
        let opt = {
            priority: true,
            responder: ()=>{return Data.menuOpen},
            swipeMove: (e)=>{
                this.refs.menu.moveMenu(e);
            },
            swipeLeft: (e)=>{
                this.refs.menu.switchMenu(e);
            },
            swipeEnd: (e)=>{
                this.refs.menu.endMenu(e);
            },
        };
        this._gestureHandlers  = new Gesture(opt);
    }

    _initialRoute() {
        let obj = {};
        if (Store.session_user_id) {
            obj = { name: 'LetsMeet',component: LetsMeet,title: 'Let\'s Meet',navBarType: 1,RightButton: 'heart'};
            Routes.push('LetsMeet');
        } else {
            obj = { name: 'Index', component: Index, navBarType: 0};
            Routes.push('Index');
        }
        return obj
    }

    _renderScene(route, navigator) {
        let Component = route.component;
        return <Component navigator={navigator} route={route}/>
    }

    _configureScene(route, navigator) {
        let sceneConfig = Navigator.SceneConfigs.HorizontalSwipeJump;
        return sceneConfig;
    }

    _onWillFocus = (event) => { 
        console.log('Navigator start');  
        if (event.data.route.name == 'Index') {
            this._navbar.refs['navBar'].setNativeProps({style:{height:0,opacity :0}});
            this._hideNavBar = true;
        } else if(this._hideNavBar) {
            this._navbar.refs['navBar'].setNativeProps({style:{height:60,opacity :1}});
            this._hideNavBar = false;
        }
        this._NotificationModule(event.data.route.name,'start');
    }

    _onDidFocus = (event) => {
        console.log('Navigator end');
        //console.log(event.data.route.name);
        this._NotificationModule(event.data.route.name,'end');
    }

    _NotificationModule = (name,type) => {
        if (SceneObj[name]) {
            if (SceneObj[name].notificationNavSwipe) {
                SceneObj[name].notificationNavSwipe(type);
            }
        } else {
           console.log('Don\'t find Module');
        }
    }

    _setNavigatorRef = (navigator) => {
        if (navigator !== this._navigator) {
            this._navigator = navigator;
            if (navigator) {
                this._listeners = [];
                this._listeners.push(navigator.navigationContext.addListener('willfocus', this._onWillFocus));
                this._listeners.push(navigator.navigationContext.addListener('didfocus', this._onDidFocus));
            }
        }
    }

    renderNavBar(that) {
        let routeMapper = {
            LeftButton(route, navigator, index, navState) {
                let jsx = null;
                if (typeof(route.navBarType) == 'undefined' || route.navBarType == 2) {
                    jsx = <TouchableOpacity
                            onPress={() => Utils.navGoBack(navigator)}
                            style={styles.button}>
                            <Icon name="md-arrow-back" style={styles.icon} size={30}/>
                          </TouchableOpacity>
                } else if (route.navBarType == 1) {
                    jsx = <TouchableOpacity
                             onPress={() => {that.refs.menu.switchMenu()}}
                             style={styles.button}>
                            <Icon name="md-menu" style={styles.icon} size={30}/>
                          </TouchableOpacity>;
                }
                return (jsx);
            },
            RightButton(route, navigator, index, navState) {
                let jsx = null;
                if (route.RightButton) {
                    jsx = <TouchableOpacity
                            onPress={() => SceneObj[route.name].rightButton() }
                            style={styles.button}>
                            {_RightButton[route.RightButton]}
                          </TouchableOpacity>
                }
                return (jsx);
            },
            Title(route, navigator, index, navState) {
                // if (index > 0) {
                    return (
                        <View style={styles.title}>
                            <Text style={styles.buttonText}>{route.title ? route.title : '' }</Text>
                        </View>
                    );
                // } else {
                //     return null;
                // }
            }
        }
        return (< Navigator.NavigationBar ref={(navbar)=>this._navbar = SceneObj.NavBar = navbar} style = {Store.session_user_id ? styles.navigationBarStyleShow : styles.navigationBarStyleHide} routeMapper = {routeMapper}/>);       
    }

    render() {
        return (
            <View style={styles.container}>
                <Menu ref='menu'  getNav={()=>this._navigator} />
                <View ref='containerContent' style={styles.containerContent} {...this._gestureHandlers}>
                    <Navigator
                        ref={this._setNavigatorRef}
                        initialRoute = {this._initialRoute() }
                        configureScene = {this._configureScene}
                        renderScene = {this._renderScene}
                        sceneStyle={styles.sceneStyle}
                        navigationBar={this.renderNavBar(this) }
                        />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create(Css.AppStyle);

export default App;
